<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
      *{ margin: 0; padding: 0}
      :focus{outline: none}
      #header { background: #fff; height: 50px;background-color: #fc6d4d;width: 100%;}
      #back { float: left;width: 10%; }
      #back img{ width: 16px; height: 16px;margin: 17px}
      #wen{  width: 80%; text-align: center; float: left; display: table;}
      #wen h4{ color: #fff; line-height: 50px; font-size: 14px}
      #search { width: 10%;float: right}
      #search img{ width: 16px; height: 16px; margin: 17px;margin-left:0;}
      #xm_cont{border-top: 1px solid #F5F5F5; padding-bottom: 20px; border-bottom: 1px solid #F5F5F5;}
      #xm_cont  .title{ font-size: 14px; height: 52px; background: #FFF}
      #xm_cont .title  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
      #xm_cont .title h3{ float: left; line-height: 52px; color: #333333;}
      #xm_cont .cont_n{ width: 90%; margin: 5px auto; color: #999; font-size: 14px; line-height: 2em}

      #tp_cont{ margin-top: 10px;  border-bottom: 1px solid #F5F5F5; padding-bottom: 105px}
      #tp_cont  .title{ font-size: 14px; height: 52px; background: #FFF}
      #tp_cont .title  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
      #tp_cont .title h3{ float: left; line-height: 52px; color: #333333;}
      #tp_cont .cont_n{ width: 90%; margin: 3px auto; color: #999; font-size: 14px; line-height: 2em}
      #tp_cont .cont_n img{ float: left;width: 30%; height: 94px; margin: 5px}

      #lxr_cont{  border-bottom: 1px solid #F5F5F5; padding-bottom: 80px}
      #lxr_cont  .title{ font-size: 14px; height: 52px; background: #FFF}
      #lxr_cont .title  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
      #lxr_cont .title h3{ float: left; line-height: 52px; color: #333333;}
      #lxr_cont .cont_n{ width: 90%; margin: 3px auto; color: #999; font-size: 14px; }
      #lxr_cont .cont_n .tou{ width: 58px; height: 58px; float:  left;}
      #lxr_cont .cont_n .tou img{width: 58px; height: 58px;border-radius: 50%}
      #lxr_cont .cont_n .cont_n_c{ float: left; margin-left: 20px}
      #lxr_cont .cont_n .cont_n_c  h4{color: #333333; font-size: 14px;  margin-top: 5px;margin-right: 8px;display: inline-block;}
      #lxr_cont .cont_n .cont_n_c img{display: inline-block;vertical-align: middle;width: 50px;height: 13px;}
      #lxr_cont .cont_n .cont_n_c .dizhi{ margin-top: 8px}
      #lxr_cont .cont_n .cont_n_c .dizhi span{ display: block;float: left;}
      #lxr_cont .cont_n .cont_n_c .dizhi span img{ width: 12px; height: 12px;margin-top: 2px}
.clearfix{clear: both;}
      button{ width: 90%; height: 40px; text-align: center; color: #FFF; background: #fc8622; margin: 15px auto; margin-left: 5%; border-radius: 10px}
      </style>
  </head>
  <body>



<div id="tuoche_cont">
  <div>
    <div id="xm_cont">
      <div class="title">
          <span></span>
          <h3>需求详情</h3>
      </div>
      <div class="cont_n">
          <p>{{djxx}}</p>
      </div>
    </div>


    <div id="lxr_cont">
      <div class="title">
          <span></span>
          <h3>联系人</h3>
      </div>
        <div class="cont_n">
            <div class="tou">
                <img :src="touxiang" >
            </div>
            <div class="cont_n_c">
              <h4>{{name}}</h4>
                <img class="le" src="../../image/renzheng.png"  v-if="ren">
              <div class="dizhi">
                <span><img src="../../image/dizhi.png" alt="">&nbsp;</span>
                <span>{{dizhi}}    &nbsp;&nbsp;&nbsp;&nbsp;</span>

                <span>距离你{{juli}}KM</span>
              </div>
            </div>

        </div>
    </div>
    <button @click="call(dianhua)" tapmode>拨打电话</button>
    </div>
</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
      apiready = function(){
      margin()
        //沉浸
        var header = $api.byId('header');
        headerH = $api.fixStatusBar(header);
         keyback()
        //接收id
         id = api.pageParam.id;

        //后请求数据
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

      api.setRefreshHeaderInfo({
          loadingImg: 'widget://image/refresh.png',
          bgColor: '#fff',
          textColor: '#333',
          textDown: '下拉刷新...',
          textUp: '松开刷新...'
      }, function(ret, err) {
        ajax();

      });
      //地图
      ajax();

      //vue
         showtc = new Vue({
                   el: '#tuoche_cont',
               data: {
                 djxx:'美瑞特挖掘机维修，10年挖掘机维修经验，100余名挖掘机修理技师，价值300万的挖掘机维修设备。1500台∕次挖掘机维修案例，擅长卡特、小松、日立、沃尔沃、现代等等。',

                  touxiang:"",
                  name:"",
                  dizhi:"",
                  juli:"",
                  dianhua:"",
                  ren:false,
                  img1:'',
                  img2:'',
                  img3:'',
               }
               });


      };
  var headerH,map,id,type;
      function margin(){
        var type = api.pageParam.type;
        if(type==3){
          $api.css($api.byId('xm_cont'),'margin-top:240px;')
        }
      }


function ditu(lat,lon){
    var type = api.pageParam.type;
    if(type==3){
         map = api.require('bMap');
        map.open({
            rect: {
                x: 20,
                y: headerH+10,
                w: api.winWidth - 40,
                h: 200
            },
            center: {
                lon: lon,
                lat: lat
            },
            zoomLevel: 16,
            showUserLocation:true,
            fixedOn: api.frameName,
            fixed: false

        }, function(ret) {
            if (ret.status) {
                console.log('地图打开成功');
            }
        });
        map.setMapAttr({
            scrollEnable:false
        });
        //大头针
        map.addAnnotations({
            annotations: [{
                id: 1,
                lon: lon,
                lat: lat
            }],

            draggable: true
        });
    }

}

function photoview(){

}

function qiehuan(){
    shoucang = $api.byId('soucang');
    console.log();
    if($api.attr(shoucang,'alt')==1){
      $api.attr(shoucang,'src','../../image/collection_n.png');
      $api.attr(shoucang,'alt','2');
      api.toast({
          msg: '收藏成功',
          duration: 2000,
          location: 'bottom'
      });
    }else{
      $api.attr(shoucang,'src','../../image/collection.png');
      $api.attr(shoucang,'alt','1');
      api.toast({
          msg: '取消成功',
          duration: 2000,
          location: 'bottom'
      });
    }
}


function call(phone){

api.call({
    type: 'tel_prompt',
    number: phone
});
}


function back(){
  map.close();
  api.closeWin();
}

function fangda(data) {
api.openWin({
    name: 'zhfwfdpic',
    url: 'zhfwfdpic.html',
    pageParam: {
        img:data
    }
});

}

function ajax(){
  console.log(id);
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?c=home&m=xmzx_show&id='+id+'&uid='+$api.getStorage("member"),
      method: 'get',
  },function(ret, err){
      if (ret) {
          showtc.touxiang=ret.status.touxiang;
          showtc.name=ret.status.name;
          showtc.dizhi=ret.status.dizhi;
          showtc.juli=ret.status.juli;
          showtc.djxx=ret.status.cont;
          showtc.ren=ret.status.ren;
          showtc.dianhua =ret.status.phone
          ditu(ret.status.lat,ret.status.lon);

        api.hideProgress();
      } else {
          console.log( JSON.stringify( err ) );
      }
  });


}
function keyback() {
api.addEventListener({
    name: 'bkeyback'
}, function(ret, err){
    if( ret ){
      api.closeWin({
});

    }else{

    }
});
  }


  </script>
  </html>
